<template>
  <t-breadcrumb class="breadcrumb">
    <t-breadcrumbItem>
      <t-icon name="home" />首页
    </t-breadcrumbItem>
    <t-breadcrumbItem>用户管理</t-breadcrumbItem>
  </t-breadcrumb>
  <div class="head">
    <img src="敬业.png" alt="">
    <img src="诚信.png" alt="">
    <img src="友善.png" alt="">
    <div class="form">
      <t-form label-width="90px" @submit="queryList">
        <t-row style="margin-top: 20px;">
          <t-col :span="3">
            <t-form-item label="班级名称：">
              <t-input v-model="data.formData.classname" placeholder="请输入班级名称" />
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label-width="20px">
              <t-button type="submit">查询</t-button>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </div>
  </div>
  <div class="content">
    <t-button style="margin: 5px;" theme="primary" @click="addClass">添加班级</t-button>
    <t-table :maxHeight="510" row-key="id" :data="table.data" :columns="table.columns" bordered table-content-width="100%"
             :pagination="{ total: data.total }" @PageChange="pageChange" :loading="data.loading">
      <template #total="{ row }">
        <span>{{ row.studentNum + row.teacherNum }}</span>
      </template>
      <template #operation="{ row }">
        <t-popconfirm theme="danger" content="是否删除该班级?" @Confirm="delClass(row.id)">
          <t-button theme="danger">删除</t-button>
        </t-popconfirm>
      </template>
    </t-table>
  </div>
  <classAddDialog ref="dialog" @callback="queryList" />
</template>
<script setup lang="ts">
import {MessagePlugin, PageInfo} from 'tdesign-vue-next';
import {onMounted, reactive, ref} from 'vue';
import {queryClassList, deleteClass} from "../api/Class";
import classAddDialog from '../components/classAddDialog.vue';
const data = reactive({
  formData: {
    classname: '',
    pageSize: 10,
    current: 1,
  },
  total: 0,
  // 表格加载状态
  loading: true,
});
// table项
const table = reactive({
  data: [],
  columns: [{
    align: 'center',
    width: 30,
    colKey: 'id',
    title: 'ID',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'classname',
    title: '班级名称',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'studentNum',
    title: '学生人数',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'teacherNum',
    title: '教师人数',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'total',
    title: '总人数',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'operation',
    title: '操作',
    fixed: 'left',
  },
  ]
});
// 分页
function pageChange(pageInfo: PageInfo) {
  data.formData.pageSize = pageInfo.pageSize;
  data.formData.current = pageInfo.current;
  queryList();
}
// 查询班级列表
const queryList = async () => {
  data.loading = true;
  const result = await queryClassList(data.formData);
  data.total = result.data.total;
  table.data = result.data.classList;
  data.loading = false;
}
const dialog = ref();
// 添加班级
const addClass = () => {
  dialog.value.open();
}
// 删除班级
const delClass = async (id:number) => {
  const result = await deleteClass(id);
  if(result){
    MessagePlugin.success(result.message);
    queryList();
  }

}
onMounted(() => {
  queryList();
})
</script>
<style lang="less" scoped>
.breadcrumb {
  margin: 10px 0 0 10px;
}

.head {
  width: 100%;
  height: 150px;
  display: flex;

  img {
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  .form {
    flex: 1;
    margin: 10px;
  }
}

.content {
  width: 100%;
  padding: 0 10px;
}
</style>
